<template>
  <div>
    <a-modal
      v-model:visible="isok"
      title="历史记录"
      @ok="handleOk"
      width="1000px"
      :closable="false"
    >
      <div style="display: flex; gap: 20px">
        <div>
          <div v-if="isshowcreate" style="display: flex; gap: 20px">
            <div style="font-size: 12px; width: 64px; color: gray">
              {{ currentDate }}数据库3.0版
              <!-- {{valueVersions==='0'?'数据库3.0版':'数据库3.2版'}} -->
            </div>
            <div style="width: 850px">
              <p>create:{{ create }}</p>
              <p>modify:{{ modify }}</p>
            </div>
          </div>
          <div v-if="isshowcreate2" style="display: flex; gap: 20px">
            <div style="font-size: 12px; width: 64px; color: gray">
              {{ currentDate }}数据库3.2版
              <!-- {{valueVersions==='0'?'数据库3.0版':'数据库3.2版'}} -->
            </div>
            <div style="width: 850px">
              <p>create:{{ create2 }}</p>
              <p>modify:{{ modify2 }}</p>
            </div>
          </div>
          <!-- <p v-if="isshowcreate">create:{{ create2 }}</p> -->
          <!-- <p v-if="isshowModify">modify:{{ modify }}</p> -->
          <!-- <div v-if="isshowModify" style="display: flex; gap: 20px">
            <div style="font-size: 12px; width: 64px">
              {{ currentDate }}数据库3.0版
            </div>
            <div style="width: 850px">modify:{{ modify }}</div>
          </div>
          <div v-if="isshowModify2" style="display: flex; gap: 20px">
            <div style="font-size: 12px; width: 64px">
              {{ currentDate }}数据库3.2版
            </div>
            <div style="width: 850px">modify:{{ modify2 }}</div>
          </div> -->
        </div>
      </div>
      <div v-if="isshowcreate === false && isshowcreate2 === false">
        <p class="noMsg">暂无记录</p>
      </div>
      <!-- <div v-else>
        <p class="noMsg">暂无记录</p>
      </div> -->
    </a-modal>
  </div>

  <div style="margin-top: 20px">
    <a-row justify="space-between">
      <a-col :span="6" style="margin-left: 10px">
        <a-select
          ref="select"
          v-model:value="valueVersions"
          style="width: 127px; margin-left: -9px"
          :options="versions"
          @change="Changeversions"
        ></a-select>
        <a-button
          @click="addTable"
          style="margin-left: 22px"
          v-if="token != '0'"
          >新建表</a-button
        ></a-col
      >
      <a-col :span="2" style="margin-right: -16px">
        <a-button
          @click="HistoryData"
          class="btn"
          type="primary"
          v-if="token != '0'"
          >历史记录</a-button
        ></a-col
      >
    </a-row>
  </div>
  <!-- 新建表部分 -->
  <a-modal
    v-model:visible="isaddTable"
    title="新建表"
    @ok="handleOkAdd"
    width="1000px"
    :closable="false"
  >
    <div class="newaddTable">
      <a-row justify="start" :gutter="4" style="margin: 10px 0">
        <a-col :span="2"> 表名:</a-col>
        <a-col :span="8">
          <a-input v-model:value="inputValue"></a-input>
        </a-col>
      </a-row>
      <a-button
        type="primary"
        class="editable-add-btn"
        style="margin-bottom: 8px"
        @click="handleAddNew"
        >新增</a-button
      >
      <a-table
        bordered
        :data-source="newdataAdd"
        :columns="columns"
        width="100%"
      >
        <template #bodyCell="{ column, text, record }">
          <template
            v-if="['name', 'length', 'comment'].includes(column.dataIndex)"
          >
            <div>
              <a-input
                v-if="editableDataNew[record.key]"
                v-model:value="editableDataNew[record.key][column.dataIndex]"
                style="margin: -5px 0"
              />
              <template v-else>
                {{ text }}
              </template>
            </div>
          </template>
          <template v-if="['type'].includes(column.dataIndex)">
            <div>
              <a-select
                v-if="editableDataNew[record.key]"
                v-model:value="editableDataNew[record.key][column.dataIndex]"
                style="width: 120px"
                :options="types"
                @change="NewChangeType"
              ></a-select>
              <template v-else>
                {{ text }}
              </template>
            </div>
          </template>
          <template v-if="['nullable'].includes(column.dataIndex)">
            <div>
              <a-select
                v-if="editableDataNew[record.key]"
                v-model:value="editableDataNew[record.key][column.dataIndex]"
                style="width: 120px"
                :options="nullables"
                @change="NewChangeNull"
              ></a-select>
              <template v-else>
                {{ text }}
              </template>
            </div>
          </template>
          <template v-if="['auto_increment'].includes(column.dataIndex)">
            <div>
              <a-select
                v-if="editableDataNew[record.key]"
                v-model:value="editableDataNew[record.key][column.dataIndex]"
                style="width: 120px"
                :options="isauto"
                @change="NewChangeAuto"
              ></a-select>
              <template v-else>
                {{ text }}
              </template>
            </div>
          </template>
          <template v-else-if="column.dataIndex === 'operation'">
            <div class="editable-row-operations">
              <span v-if="editableDataNew[record.key]">
                <a-typography-link @click="saveNew(record.key)"
                  >save</a-typography-link
                >
                <a-popconfirm
                  title="Sure to cancel?"
                  @confirm="cancelNew(record.key)"
                >
                  <a>cancel</a>
                </a-popconfirm>
              </span>
              <span v-else>
                <a @click="editNew(record.key)">编辑</a>
              </span>
              <a-popconfirm
                v-if="newdataAdd.length"
                title="Sure to delete?"
                @confirm="onDeleteNew(record.key)"
              >
                <a>删除</a>
              </a-popconfirm>
            </div>
          </template>
        </template>
      </a-table>
      <!-- <a-button @click="tijiao">提交</a-button> -->
    </div>
  </a-modal>

  <!-- 标签页部分 -->
  <a-tabs
    v-model:activeKey="activeKey"
    :tab-position="tabPosition"
    @change="tabChange"
    animated
    class="tab-style"
  >
    <a-tab-pane
      v-for="item in valueVersions === '0' ? table : table2"
      :key="item.key"
      :tab="item.title"
    >
      <div class="ContentTable">
        <a-row justify="start" :gutter="4" style="margin: 10px 0">
          <a-col :span="2"> 表名:</a-col>
          <a-col :span="8">
            <a-input v-model:value="item.title" disabled></a-input>
          </a-col>
        </a-row>
        <!-- <a-button
          v-if="token !== '0'"
          type="primary"
          class="editable-add-btn"
          style="margin-bottom: 8px"
          @click="handleAdd"
          >新增</a-button
        > -->
        <a-table
          bordered
          :data-source="dataSource"
          :columns="token !== '0' ? columns : columnsUser"
          width="100%"
          :pagination="false"
        >
          <template #bodyCell="{ column, text, record }">
            <template
              v-if="['name', 'length', 'comment'].includes(column.dataIndex)"
            >
              <div>
                <a-input
                  v-if="editableData[record.key]"
                  v-model:value="editableData[record.key][column.dataIndex]"
                  style="margin: -5px 0"
                  allowClear
                />
                <template v-else>
                  {{ text }}
                </template>
              </div>
            </template>
            <template v-if="['type'].includes(column.dataIndex)">
              <div>
                <a-select
                  v-if="editableData[record.key]"
                  v-model:value="editableData[record.key][column.dataIndex]"
                  style="width: 120px"
                  :options="types"
                  @change="handleChangeType"
                >
                </a-select>
                <template v-else>
                  {{ text }}
                </template>
              </div>
            </template>
            <template v-if="['nullable'].includes(column.dataIndex)">
              <div>
                <a-select
                  v-if="editableData[record.key]"
                  v-model:value="editableData[record.key][column.dataIndex]"
                  style="width: 120px"
                  @change="handleChangeNull"
                >
                  <a-select-option
                    v-for="item in nullables"
                    :key="item.value"
                    >{{ item.label }}</a-select-option
                  ></a-select
                >
                <!-- <a-switch
                  v-if="editableData[record.key]"
                  v-model:checked="editableData[record.key][column.dataIndex]"
                  @change="handleChangeNull"
                /> -->
                <template v-else>
                  {{ text }}
                </template>
              </div>
            </template>
            <template v-if="['auto_increment'].includes(column.dataIndex)">
              <div>
                <a-select
                  v-if="editableData[record.key]"
                  v-model:value="editableData[record.key][column.dataIndex]"
                  style="width: 120px"
                  :options="isauto"
                  @change="handleChangeauto"
                ></a-select>
                <template v-else>
                  {{ text }}
                </template>
              </div>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
              <div class="editable-row-operations">
                <span v-if="editableData[record.key]">
                  <a-typography-link @click="save(record, record.key)"
                    >save</a-typography-link
                  >
                  <a-popconfirm
                    title="Sure to cancel?"
                    @confirm="cancel(record.key)"
                  >
                    <a>cancel</a>
                  </a-popconfirm>
                </span>
                <span v-else>
                  <a @click="edit(record.key)">编辑</a>
                </span>
                <a-popconfirm
                  v-if="dataSource.length"
                  title="Sure to delete?"
                  @confirm="onDelete(record, record.key)"
                >
                  <a>删除</a>
                </a-popconfirm>
              </div>
            </template>

            <!-- <template v-if="column.dataIndex === 'type'">
              <a-select
                ref="select"
                v-model:value="record['type']"
                style="width: 120px"
                :options="types"
                @change="handleChangeType"
              ></a-select>
            </template>
            <template v-if="column.dataIndex === 'nullable'">
              <a-select
                ref="select"
                v-model:value="record['nullable']"
                style="width: 120px"
                :options="nullables"
                @change="handleChangeNull"
              ></a-select>
            </template> -->
          </template>
        </a-table>
        <a-button
          type="dashed"
          block
          v-if="token !== '0'"
          class="editable-add-btn"
          style="margin-bottom: 8px"
          @click="handleAdd"
          ><plus-outlined />添加一行数据</a-button
        >
      </div>
    </a-tab-pane>
  </a-tabs>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { useStore } from 'vuex'
import { cloneDeep } from 'lodash-es'
import { tabledata } from '@/api/table'
import { message } from 'ant-design-vue'
const store = useStore()
const tabPosition = ref('left') // 标签页组件的位置
const activeKey = ref('表1')
const keys = ref(4)
const keysNew = ref(0)
const isok = ref(false) // 控制历史记录弹框
const isaddTable = ref(false) // 控制新增表弹框
const inputValue = ref('')
const create = ref([])
const modify = ref([])
const isedit = ref(false)
const isadd = ref(false)
const isdel = ref(false) // 删除
const editcolum = ref()
const isshowcreate = ref(false) // 控制历史记录里面的create显示
const isshowcreate2 = ref(false) // 控制历史记录里面的create显示
const isshowModify = ref(false)
const date = new Date() // 获取时间
let month = date.getMonth() + 1
let strDate = date.getDate()
if (month >= 1 && month <= 9) {
  month = '0' + month
}
if (strDate >= 0 && strDate <= 9) {
  strDate = '0' + strDate
}
const currentDate = date.getFullYear() + '-' + month + '-' + strDate
// const token = window.sessionStorage.getItem('token')
// const token = computed(() => store.state.token) // 从vuex读取
const token = window.localStorage.getItem('token')
const columns = [
  {
    title: '字段名',
    dataIndex: 'name',
    width: '15%',
  },
  {
    title: '类型',
    dataIndex: 'type',
    width: '20%',
  },
  {
    title: '长度',
    dataIndex: 'length',
    width: '15%',
  },
  {
    title: '是否为空',
    dataIndex: 'nullable',
    width: '10%',
    // slots: { customRender: 'nullable' }, // 插槽 对应 <template #nullable = '{text}'>{{text}}<template>
  },
  {
    title: '是否自增',
    dataIndex: 'auto_increment',
    width: '10%',
  },
  {
    title: '描述',
    dataIndex: 'comment',
    width: '15%',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: '80%',
  },
]
const columnsUser = [
  {
    title: '字段名',
    dataIndex: 'name',
    width: '20%',
  },
  {
    title: '类型',
    dataIndex: 'type',
    width: '20%',
  },
  {
    title: '长度',
    dataIndex: 'length',
    width: '10%',
  },
  {
    title: '是否为空',
    dataIndex: 'nullable',
    width: '10%',
  },
  {
    title: '是否自增',
    dataIndex: 'auto_increment',
    width: '10%',
  },
  {
    title: '描述',
    dataIndex: 'comment',
    width: '15%',
  },
]
// 使用计算属性computed 显示表格列
// const isColumns = computed(() => (token.value !== 0 ? columns : columnsUser))
const dataSource = ref([])
const newdataAdd = ref([])
const tabKey = ref(2)
const table = ref([
  // 数据库版本3.0
  {
    key: '表1',
    title: '表1',
  },
  {
    key: '表2',
    title: '表2',
  },
])
const table2 = ref([
  // 数据库版本3.2
  {
    key: '表1',
    title: '表1',
  },
  {
    key: '库2',
    title: '库2',
  },
  {
    key: '库3',
    title: '库3',
  },
  {
    key: '库4',
    title: '库4',
  },
])
const versions = ref([
  // 版本下拉框
  {
    value: '0',
    label: '数据库3.0版',
  },
  {
    value: '1',
    label: '数据库3.2版',
  },
])
const valueVersions = ref('0') // 版本默认选中
// const vuexVersions = computed(() => store.state.versionsVal)
const Changeversions = (val, e) => {
  message.success(`切换到${e.label}`)
  tabledata().then((res) => {
    dataSource.value = res.init[0].columns
    // console.log(res.init[0].columns)
  })
}
// 类型下拉框
const types = ref([
  {
    value: 'int',
    label: 'int',
  },
  {
    value: 'tinyint',
    label: 'tinyint',
  },
  {
    value: 'smallint',
    label: 'smallint',
  },
  {
    value: 'bigint',
    label: 'bigint',
  },
  {
    value: 'float',
    label: 'float',
  },
  {
    value: 'char',
    label: 'char',
  },
  {
    value: 'varchar',
    label: 'varchar',
  },
  {
    value: 'text',
    label: 'text',
  },
  {
    value: 'longtext',
    label: 'longtext',
  },
  {
    value: 'date',
    label: 'date',
  },
  {
    value: 'datetime',
    label: 'datetime',
  },
  {
    value: 'time',
    label: 'time',
  },
])
const nullables = ref([
  {
    value: '是',
    label: '是',
  },
  {
    value: '否',
    label: '否',
  },
])
const isauto = ref([
  {
    value: '是',
    label: '是',
  },
  {
    value: '否',
    label: '否',
  },
])
// 标签切换
const tabChange = (key) => {
  tabledata().then((res) => {
    dataSource.value = res.init[0].columns
    // console.log(res.init[0].columns)
  })
  // console.log(key)
}
const addTable = () => {
  // 新建表事件
  isaddTable.value = true
}
const editIndex = ref(0)
const editIndexNew = ref(0)
const editableData = reactive({})
const editableDataNew = reactive({})
// 调接口 表格
tabledata().then((res) => {
  dataSource.value = res.init[0].columns
  dataSource.value.forEach((item) => {
    // 把true和false转换为是和否
    if (item.nullable) {
      item.nullable = nullables.value[0].label
    } else {
      item.nullable = nullables.value[1].label
    }
  })
})
// const copydata = Object.assign({}, dataSource.value) // 拷贝
// const newcopy = reactive([])
// for (const item in copydata) {
//   // 对象转为数组
//   newcopy.push(copydata[item])
// }
const edit = (key) => {
  // console.log(editIndex.value)
  editIndex.value = key
  editableData[key] = cloneDeep(
    dataSource.value.filter((item) => key === item.key)[0]
  )
}
// 新建表编辑
const editNew = (key) => {
  editIndexNew.value = key
  editableDataNew[key] = cloneDeep(
    newdataAdd.value.filter((item) => key === item.key)[0]
  )
}

const modify2 = ref([])
const save = (record, key) => {
  isedit.value = true
  // console.log(key)
  // console.log(editIndex.value)
  // console.log(editableData[key])
  // console.log('-', record, key, editableData[key], dataSource.value[key])
  Object.assign(
    dataSource.value.filter((item) => key === item.key)[0],
    editableData[key]
  )
  editcolum.value = editableData[key]
  // console.log(editableData[key])
  // console.log(record.nullable)
  if (record.nullable === nullables.value[0].value) {
    // 下拉框选择显示的true和false转为是和否
    record.nullable = nullables.value[0].value
  } else {
    record.nullable = nullables.value[1].value
  }
  // 判断是否包含int之类
  if (
    (editableData[key].type === 'int' &&
      editableData[key].length.length > 10) ||
    (editableData[key].type === 'tinyint' &&
      editableData[key].length.length > 3) ||
    (editableData[key].type === 'bigint' &&
      editableData[key].length.length > 19) ||
    (editableData[key].type === 'smallint' &&
      editableData[key].length.length > 5)
  ) {
    message.warning('length长度超出')
  } else if (
    editableData[key].type === 'tinyint' &&
    editableData[key].length > 127
  ) {
    message.warning('length字段不在tinyint取值范围内')
  } else {
    delete editableData[key]
    // const aa = ref([])
    // isshowcreate.value = true
    if (valueVersions.value !== '0') {
      isshowcreate2.value = true
      modify2.value.push({
        table: activeKey.value, // 表名
        type: 'change',
        column: editcolum.value.name, // 直接放editableData[key],dataSource.value[key].name
        define: editcolum.value,
      })
    } else {
      isshowcreate.value = true
      // modify.value.push({
      //   table: activeKey.value, // 表名
      //   type: 'change',
      //   column: editcolum.value.name, // 直接放editableData[key],dataSource.value[key].name
      //   define: editcolum.value,
      // })
      // console.log(isadd.value)
      if (isadd.value && isedit.value) {
        modify.value.push({
          table: activeKey.value, // 表名
          type: 'add',
          column: editcolum.value.name, // 直接放editableData[key],dataSource.value[key].name
          define: editcolum.value,
        })
        isadd.value = false
      } else {
        modify.value.push({
          table: activeKey.value, // 表名
          type: 'change',
          column: editcolum.value.name, // 直接放editableData[key],dataSource.value[key].name
          define: editcolum.value,
        })
      }
    }
    message.success(`修改成功`)
  }
  // console.log('modify', modify.value)
  // modify.value = modify.value.slice(-1)
}

// 下拉框改变--------------------------------------------------------
const handleChangeType = (val, record) => {
  console.log(val)
  editableData[editIndex.value].type = val
  // console.log(editableData[editIndex.value].length)
  if (val === 'float') {
    // float类型没有限制
    editableData[editIndex.value].length = ''
  }
}
const handleChangeNull = (val, record) => {
  // console.log(val)
  editableData[editIndex.value].nullable = val
}
const handleChangeauto = (val, record) => {
  console.log(editIndex.value)
  editableData[editIndex.value].auto_increment = val
  console.log(dataSource.value)
  if (val === '是') {
    message.warning('自增列已变更')
    editableData[editIndex.value].auto_increment = '否'
    // 遍历获取所有的自增字段，先全部改为false，选中的改为true
    dataSource.value.forEach((item) => {
      item.auto_increment = '否'
      editableData[editIndex.value].auto_increment = '是'
    })
  }
}
// 新建表保存
const saveNew = (key) => {
  Object.assign(
    newdataAdd.value.filter((item) => key === item.key)[0],
    editableDataNew[key]
  )
  // editcolum.value = editableDataNew[key]
  // const typesIsint = ['int', 'tinyint', 'smallint', 'bigint']
  console.log(editableDataNew[key])
  if (
    (editableDataNew[key].type === 'int' &&
      editableDataNew[key].length.length > 10) ||
    (editableDataNew[key].type === 'tinyint' &&
      editableDataNew[key].length.length > 3) ||
    (editableDataNew[key].type === 'bigint' &&
      editableDataNew[key].length.length > 19) ||
    (editableDataNew[key].type === 'smallint' &&
      editableDataNew[key].length.length > 5)
  ) {
    message.warning('length长度超出')
  } else if (
    editableDataNew[key].type === 'tinyint' &&
    editableDataNew[key].length > 127
  ) {
    message.warning('length字段不在tinyint取值范围内')
  } else {
    delete editableDataNew[key]
  }
}
const NewChangeType = (val) => {
  editableDataNew[editIndexNew.value].type = val
}
const NewChangeNull = (val) => {
  editableDataNew[editIndexNew.value].nullable = val
}
const NewChangeAuto = (val) => {
  editableDataNew[editIndexNew.value].auto_increment = val
}
const onDelete = (record, key) => {
  console.log(isadd.value)
  isdel.value = true
  dataSource.value = dataSource.value.filter((item) => item.key !== key)
  // if (valueVersions.value !== '0') {
  //   isshowcreate2.value = true
  //   modify2.value.push({
  //     // 删除数据
  //     table: activeKey.value,
  //     type: 'delete',
  //     column: record.name,
  //     define: record,
  //   })
  // } else {
  //   isshowcreate.value = true
  //   if (
  //     (isadd.value && isdel.value) ||
  //     (isadd.value && isdel.value && isedit.value)
  //   ) {
  //     // modify.value.push()
  //     const newArr = [...modify.value]
  //     const indexArr = []
  //     modify.value.forEach((s, i) => {
  //       let count = 0
  //       newArr.forEach((m, j) => {
  //         if (modify.value[i].define.key === newArr[j].define.key) {
  //           // 当属性值都相同时，打印索引位置
  //           count++
  //         }
  //       })
  //       // console.log("索引:",i,"相同次数:",count)
  //       if (count > 1) {
  //         // 内层循环结束，当count>1,说明此索引为对象是重复的
  //         indexArr.push(i)
  //       }
  //     })
  //     // console.log(indexArr) //相同对象索引数组
  //     let flag = -1
  //     for (var i = 0; i < indexArr.length; i++) {
  //       // 删除一次，索引位
  //       flag++
  //       if (flag === 0) {
  //         newArr.splice(indexArr[i], 1)
  //       } else {
  //         newArr.splice(indexArr[i] - flag, 1) // 每次删除，需要删除的索引位就要减去1
  //       }
  //     }
  //     console.log(newArr)
  //     isadd.value = false
  //     isedit.value = false
  //     // 判断如果 key值相同 就删除所有相同的数据
  //   } else {
  //     modify.value.push({
  //       // 删除数据
  //       table: activeKey.value,
  //       type: 'delete',
  //       column: record.name,
  //       define: record,
  //     })
  //   }
  //   // modify.value.push({
  //   //   // 删除数据
  //   //   table: activeKey.value,
  //   //   type: 'delete',
  //   //   column: record.name,
  //   //   define: record,
  //   // })
  // }
  message.success(`删除成功`)
  // isshowModify.value = true
}

const onDeleteNew = (key) => {
  // console.log(111)
  newdataAdd.value = newdataAdd.value.filter((item) => item.key !== key)
}

const cancel = (key) => {
  delete editableData[key]
}

const cancelNew = (key) => {
  delete editableDataNew[key]
}

const handleAdd = () => {
  isadd.value = true
  console.log(isdel.value)
  const newData = {
    key: keys.value,
    name: 'column',
    type: 'int',
    length: '2',
    nullable: '是',
    auto_increment: '否',
    comment: '',
  }
  console.log(newData)
  keys.value = keys.value + 1
  dataSource.value.push(newData)
  if (valueVersions.value !== '0') {
    isshowcreate2.value = true
    modify2.value.push({
      // 新增数据
      table: activeKey.value,
      type: 'add',
      define: newData,
    })
  } else {
    isshowcreate.value = true
    if (isadd.value && isdel.value) {
      modify.value.push()
    }
    // modify.value.push({
    //   // 新增数据
    //   table: activeKey.value,
    //   type: 'add',
    //   define: newData,
    // })
  }

  isshowModify.value = true
}
const handleAddNew = () => {
  const newData = {
    key: keysNew.value,
    name: 'column',
    type: 'int',
    length: '1',
    nullable: '是',
    auto_increment: '否',
    comment: '',
  }
  keysNew.value = keysNew.value + 1
  newdataAdd.value.push(newData)
}
const create2 = ref([])
const newtabName = ref()
// 点击新建表弹框 右下角ok按钮
const handleOkAdd = () => {
  // console.log(inputValue.value)
  // console.log(newdataAdd.value.length, inputValue.value)
  if (!inputValue.value || newdataAdd.value.length === 0) {
    message.warning('请输入表名或数据')
    isaddTable.value = true
  } else {
    isaddTable.value = false
    console.log(newdataAdd.value, inputValue.value)
    newtabName.value = {
      // 表名
      key: inputValue.value,
      title: inputValue.value,
    }
    tabKey.value = tabKey.value + 1
    // console.log(valueVersions.value)
    if (valueVersions.value !== '0') {
      table2.value.push(newtabName.value)
      isshowcreate2.value = true
      create2.value.push({
        table: inputValue.value,
        columns: newdataAdd.value,
      })
    } else {
      isshowcreate.value = true
      table.value.push(newtabName.value) // 给左侧追加表名
      create.value.push({
        table: inputValue.value,
        columns: newdataAdd.value,
      })
    }
    // table.value.push(newtabName.value) // 给左侧追加表名
    // create.value.push({
    //   table: inputValue.value,
    //   columns: newdataAdd.value
    // })
    inputValue.value = '' // 关闭弹窗 清空内容
    newdataAdd.value = []
    // isshowcreate.value = true
  }
}
// 历史记录右下角的ok按钮
const handleOk = (e) => {
  isok.value = false
  isaddTable.value = false
}

// 历史记录
const HistoryData = (key) => {
  // console.log(isadd.value)
  isok.value = true

  const arr = modify.value
    .reverse()
    .filter((item, index) => {
      // console.log(index)
      const status = modify.value.findIndex((ele) => {
        // status来接收findIndex方法返回的下标
        return item.define.key === ele.define.key
      })
      //
      if (index === status) {
        return item
      }
    })
    .reverse()
  // 数据库2
  const newArr2 = modify2.value
    .reverse()
    .filter((item, index) => {
      // console.log(index)
      const status = modify2.value.findIndex((ele) => {
        // status来接收findIndex方法返回的下标
        return item.define.key === ele.define.key
      })
      //
      if (index === status) {
        return item
      }
    })
    .reverse()
  // console.log(arr)
  modify.value = arr
  modify2.value = newArr2
}

// return {
//   tabPosition, // 标签页方向
//   table, // 标签页数据
//   activeKey, // 标签页key
//   tabKey, // 标签页的自增key
//   tabChange, // 标签页切换事件
//   columns,
//   isColumns,
//   columnsUser,
//   onDelete,
//   onDeleteNew,
//   handleAdd,
//   handleAddNew, // 新增表里的增加按钮
//   dataSource,
//   newdataAdd, // 新增表数据
//   editableData,
//   editableDataNew,
//   edit,
//   editNew,
//   save,
//   saveNew,
//   cancel,
//   cancelNew,
//   handleOkAdd,
//   keys,
//   types,
//   nullables, // 是否为空选项
//   value,
//   handleChangeType,
//   handleChangeNull,
//   NewChangeType, // 新增表的 类型 下拉框事件
//   NewChangeNull, // 新增表的 是否为空 下拉框事件
//   addTable, // 新建表按钮
//   isaddTable, // 新建表弹框控制
//   HistoryData, // 历史记录
//   isok, // 控制结果显示隐藏
//   inputValue, // 表名的值
//   iscreate, // 新增表按钮
//   editcolum,
//   createdata,
//   create,
//   modify,
//   handleOk, // 历史记录弹框
//   token //  用户权限
</script>
<style scoped lang="less">
.ContentTable {
  // margin-top: 20px;
  // height: 100vh;
  // width: 100%;
  border: 1px solid rgb(204, 198, 198);
}
.editable-row-operations a {
  margin-right: 8px;
}
// .btn {
//   margin-left: 100px;
// }
:deep(.ant-tabs > .ant-tabs-nav) {
  width: 136px !important;
}
.tab-style {
  margin-top: 20px;
}
.noMsg {
  text-align: center;
}
:deep(.ant-tabs-nav-wrap) {
  width: 128px;
}
:deep(.ant-tabs-tab:hover) {
  background: #096dd91c;
}
:deep(.ant-tabs-tab-active) {
  background: #096dd91c;
}
</style>
